<!-- 账号管理 -->
<template>
    <div>
        <AllOut>
            <div class="index2_content">
                <TopNav :show_links="true"></TopNav>
                <div class="content_out index_content" style="padding-top:84px;">
                    <b-container fluid>
                        <b-row>
                            <b-col md="3" sm="12" class="">
                                <Asdise :nav_value="2" @asdiseClick="asdiseClick" :companyData="{}"/>
                            </b-col>
                            <b-col md="9" sm="12" class="">
                                <div class="account_main">
                                    <div v-if="indexValue == 1">
                                        <p class="flex jcsb">
                                            <span class="zhiwei_title fonts fonts24 fontw700">修改密码</span>
                                            <img style="width: 30px;height: 30px;" src="/img/back.png" alt=""
                                                @click="back()" />
                                        </p>
                                        <el-form :model="form" :rules="rules" label-width="120px" ref="ruleForm"
                                            class="demo-ruleForm-login">
                                            <el-form-item label="旧密码" prop="oldPassword" class="el-form-item-login">
                                                <el-input prefix-icon="el-icon-s-goods" v-model="form.oldPassword"
                                                    class="el-input-login" placeholder="请输入旧密码" show-password></el-input>
                                            </el-form-item>
                                            <el-form-item label="新密码" prop="password" class="el-form-item-login">
                                                <el-input prefix-icon="el-icon-s-goods" v-model="form.password"
                                                    class="el-input-login" placeholder="请输入新密码" show-password></el-input>
                                            </el-form-item>
                                            <el-form-item label="确定密码" prop="passwords" class="el-form-item-login">
                                                <el-input prefix-icon="el-icon-s-goods" v-model="form.passwords"
                                                    class="el-input-login" placeholder="请在次输入密码" show-password></el-input>
                                            </el-form-item>

                                            <el-button class="blue_btn" style="width: 470px;" type="primary"
                                                @click="resect('ruleForm')">保存</el-button>
                                        </el-form>
                                    </div>
                                    <div v-if="indexValue == 0">
                                        <p class="flex jcsb">
                                            <span class="zhiwei_title fonts fonts24 fontw700">账号信息</span>
                                            <img style="width: 30px;height: 30px;" src="/img/back.png" alt=""
                                                @click="back()" />
                                        </p>
                                        <el-form ref="form" :model="form" label-width="80px" label-position="top">
                                            <el-form-item label="账号">
                                                <el-input v-model="input" placeholder="请输入账号" disabled></el-input>
                                            </el-form-item>
                                            <!-- <el-form-item label="头像：">
                                                    <div class="flex aic" style="height: 40px;">
                                                        <el-button type="primary">选择上传文件</el-button>
                                                        <p class="fontz fonts12 my_main_from_pic_p"
                                                            style="padding-bottom: 0;">
                                                            只能上传jpg/png/word/pdf/excel格式文件，文件个数不超过20个，单个文件不能超过20M。</p>
                                                    </div>
                                                </el-form-item> -->
                                        </el-form>
                                    </div>

                                </div>

                            </b-col>
                        </b-row>
                    </b-container>
                </div>
            </div>
        </AllOut>
    </div>
</template>

<script>
import { updatePassword } from "@/api/my.js"

export default {
    data() {
        var checkPhone = (rule, value, callback) => {
            if (!value) {
                return callback(new Error("手机号不能为空"));
            } else {
                const reg = /^1[3-9][0-9]\d{8}$/;
                // 这里定义的reg变量没有加引号，所以是一种特殊的数据类型，即正则，可以直接用test()方法
                if (reg.test(value)) {
                    callback();
                } else {
                    // 具体错误信息没有提示
                    return callback(new Error("请输入正确的手机号"));
                }
            }
        }
        return {
            input: "",
            form: {
                password: "",
                code: "",
                phone: "",
                oldPassword: "",
                passwords: ""
            },
            rules: {
                // phone: [{
                //     required: true,
                //     message: '请输入手机号',
                //     trigger: 'blur'
                // }, {
                //     validator: checkPhone,
                //     trigger: "blur"
                // }],
                password: [{
                    required: true,
                    message: '请输入密码',
                    trigger: 'blur'
                }],
                // code: [{
                //     required: true,
                //     message: '请输入验证码',
                //     trigger: 'blur'
                // }],
                passwords: [{
                    required: true,
                    message: '请再次输入密码',
                    trigger: 'blur'
                }],
                oldPassword: [{
                    required: true,
                    message: '请输入旧密码',
                    trigger: 'blur'
                }],
            },
            indexValue: 0
        }

    },
    mounted() {
        this.Information = JSON.parse(sessionStorage.getItem("myInfornation"))?.user
        this.input = this.Information.phonenumber
    },
    methods: {
        back() {
            this.$router.push("index2")
            location.reload()
        },
        resect(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.form.password != this.form.passwords) {
                        this.$message({
                            type: 'error',
                            message: '两次密码不一致！'
                        });
                        return
                    }
                    let params = {
                        "oldPassword": this.form.oldPassword,
                        "newPassword": this.form.passwords,
                    }
                    updatePassword(params).then(res => {
                        console.log(res.data);
                        if (res.code == 200) {
                            this.$message({
                                type: 'success',
                                message: '修改成功!'
                            });
                            this.$router.push("login?id=login")
                            setTimeout(() => {
                                location.reload()
                            }, 100);
                        } else {
                            this.$message({
                                type: 'error',
                                message: res.msg
                            });
                        }

                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            })

        },
        onSubmit() {
            console.log('submit!');
        },
        asdiseClick(value) {
            console.log(value);
            this.indexValue = value
        }
    }
}
</script>

<style lang="scss" scoped>
.index2_content {
    position: relative;
}

.index_content {
    margin-bottom: 16px;
}

.gary {
    color: #898989;
}

.el-input {
    width: 348px;
}

.account_main {
    padding: 25px;
    background: #FFFFFF;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    border: 1px solid #CACFD6;
    height: 925px;
}

.zhiwei_title {
    position: relative;

    &::after {
        position: absolute;
        left: -25px;
        top: 10px;
        content: "";
        width: 4px;
        height: 16px;
        background: #2F6CBC;
        border-radius: 0px 2px 2px 0px;
        opacity: 1;
    }
}

.my_main_from_pic_p {
    width: 280px;
    margin-left: 20px;
    color: #898989;
    line-height: 20px;
}
</style>